<script type="text/javascript" src="js/jquery/infowindow.js"></script>
<script type="text/javascript" src="js/jquery/jquery.form.js"></script>
<script type="text/javascript">
var afid = "<?php if(isset($_GET['id'])){ echo $_GET['id']; } ?>";

$(document).ready(function(){	
	jQuery.extend(jQuery.validator.messages, {
	  required: '*',
	  remote: '*'
	});
	
		/******************rate*****************/
	
	$("#affiliateid").val(afid);
	$("#affiliateid2").val(afid);
	
	$("#vehicleinformationform").validate({
		errorClass: "my-error-class",
		validClass: "my-valid-class",
		debug: false,
		submitHandler: function(form){
			if( $("#vehicletypeone").val() || $("#vehicletypeairport").val() || $("#vehicletypehourly").val() || $("#remarks").val() || $("#services").val() ){
				var $dialog = $(
					"<div title='Add Rates'></div>"
				);
				
				$dialog.dialog({
					title: "Please Choose An Option Or Press ESC Key",
					resizable: false,
					width: 300,
					height: 50,
					autoOpen: false,
					closeOnEscape: true,
					closeText: "Close",
					modal:true,
					zIndex: 9999,
					buttons:{
						"Add Another": function(){
							if( $("#vehicletypeone").val()){
								$.post("query/addonewayrateinfo.php", {affiliateid: afid, vehicletype: $("#onewayvehicletype").val(), vehiclemodelone: $("#vehicletypeone").val(), distanceone: $("#distanceone").val(), currencyone: $("#currencyone").val(),  rateone: $("#rateone").val()});
							}
							
							if( $("#vehicletypeairport").val() ){
								$.post("query/addairportrateinfo.php", {affiliateid: afid, vehicletype: $("#vehicletype").val(), vehiclemodelairport: $("#vehicletypeairport").val(), destination: $("#destination").val(), currencyairport: $("#currencyairport").val(), rateairport: $("#rateairport").val()});
							}
							
							if( $("#vehicletypehourly").val() ){
								$.post("query/addhourlyrateinfo.php", {affiliateid: afid, vehicletype: $("#hourlyvehicletype").val(), vehiclemodelhourly: $("#vehicletypehourly").val(), minimumhourly: $("#minimumhourly").val(), currencyhourly: $("#currencyhourly").val(), ratehourly: $("#ratehourly").val()});
							}
							
							if( $("#remarks").val() ){
								$.post("query/addremarks.php", {affiliateid: afid, remarks: $("#remarks").val()});
							}
							
							if( $("#services").val() ){
								$.post("query/addservices.php", {affiliateid: afid, services: $("#services").val()});
							}
							
							
							alert("Saved!");
							cleanDiv();
							$( this ).dialog( "close" );
						},
						"Save and Continue": function(){
							if( $("#vehicletypeone").val()){
								$.post("query/addonewayrateinfo.php", {affiliateid: afid, vehicletype: $("#vehicletype").val(), vehiclemodelone: $("#vehicletypeone").val(), distanceone: $("#distanceone").val(), currencyone: $("#currencyone").val(), rateone: $("#rateone").val()});
							}
							
							if( $("#vehicletypeairport").val() ){
								$.post("query/addairportrateinfo.php", {affiliateid: afid, vehicletype: $("#vehicletype").val(), vehiclemodelairport: $("#vehicletypeairport").val(), destination: $("#destination").val(), currencyairport: $("#currencyairport").val(), rateairport: $("#rateairport").val()});
							}
							
							if( $("#vehicletypehourly").val() ){
								$.post("query/addhourlyrateinfo.php", {affiliateid: afid, vehicletype: $("#vehicletype").val(),vehiclemodelhourly: $("#vehicletypehourly").val(), minimumhourly: $("#minimumhourly").val(), currencyhourly: $("#currencyhourly").val(), ratehourly: $("#ratehourly").val()});
							}
							if( $("#remarks").val() ){
								$.post("query/addremarks.php", {affiliateid: afid, remarks: $("#remarks").val()});
							}
	
							if( $("#services").val() ){
								$.post("query/addservices.php", {affiliateid: afid, services: $("#services").val()});
							}
							
							alert("Saved!");
							window.location.replace("panel.php?page=add_affiliate_driver&id="+afid);
							$(this).dialog("close");
						
						}
					}
				});
				
				// $(".ui-dialog-titlebar").hide();
				 // $(".ui-dialog-title").css("background-color","orange");
				 $( ".selector" ).dialog({ disabled: true });
				 
				
				$dialog.dialog("open");
				return false;
			}else{
				alert("Some fields of the rates are required");
			}
		}
	});
	
	$("#companynamevehicle").autocomplete({
			source: "query/getcompanyinfo.php",
			minLength: 2,
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
	
	$("#vehicletypeone").autocomplete({
			source: "query/getvehicle.php?afid="+afid,
			minLength: 2,
			change: function(event,ui){
				$("input#onewayvehicletype").val(ui.item.vtype);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
	
	$("#vehicletypeairport").autocomplete({
			source: "query/getvehicle.php?afid="+afid,
			minLength: 2,
			change: function(event,ui){
				$("input#vehicletype").val(ui.item.vtype);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
	
	$("#vehicletypehourly").autocomplete({
			source: "query/getvehicle.php?afid="+afid,
			minLength: 2,
			change: function(event,ui){
				$("input#hourlyvehicletype").val(ui.item.vtype);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
	
	$('#photoimg').live('change', function() { 
		$("#picpreview").html('');
		$("#picpreview").html('<img src="images/shared/loader.gif" alt="Uploading...."/>');
		$("#imageform").ajaxForm({
			target: '#picpreview'
		}).submit();
	});
	
	$("#btnClearVehicle").click(function(){
		$('#imageform').each(function(){
			this.reset();
		});
		$("#picpreview").empty();
	});
	
	$("#btnSkip").click(function(){
		window.location.replace("panel.php?page=add_affiliate_driver&id="+afid);
	});
	
	$("#btnBack").click(function(){
		window.location.replace("panel.php?page=add_affiliate_vehicles&id="+afid);
	});
	
	
	function cleanDiv(){
		$('#imageform').each(function(){
			this.reset();
		});
		$("#picpreview").empty();
		var frm_elements =  vehicleinformationform.elements;
			for (i = 0; i < frm_elements.length; i++)
			{
				field_type = frm_elements[i].type.toLowerCase();
				switch (field_type)
				{
				case "text":
				case "password":
				case "textarea":
				case "hidden":
					frm_elements[i].value = "";
					break;
				case "radio":
				case "checkbox":
					if (frm_elements[i].checked)
					{
						frm_elements[i].checked = false;
					}
					break;
				case "select-multi":
					frm_elements[i].selectedIndex = -1;
					break;
				default:
					break;
				}
			}

		}
 
});
</script>

<!--  start nav-outer-repeat................................................... END -->
 
 <div class="clear"></div>
 
<!-- start content-outer -->
<div id="content-outer">
<!-- start content -->
<div id="content">


<table border="0" width="100%" height="500px" valign="top" cellpadding="0" cellspacing="0" id="content-table">
<tr>
	<th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
	<th class="topleft"></th>
	<td id="tbl-border-top">&nbsp;</td>
	<th class="topright"></th>
	<th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
</tr>
<tr>
	<td id="tbl-border-left"></td>
	<td>
	<!--  start content-table-inner -->
	<div id="content-table-inner">
	
	<table border="0" width="100%" cellpadding="0" cellspacing="0">
	<tr valign="top">
	<td>
	
	
		<!--  start step-holder -->
		<div id="step-holder">
			<div class="step-no">1</div>
			<div class="step-light-left">Add Affiliate</div>
			<div class="step-light-right">&nbsp;</div>
			<div class="step-no">2</div>
			<div class="step-light-left">Add Vehicle</div>
			<div class="step-light-right">&nbsp;</div>
			<div class="step-no">3</div>
			<div class="step-dark-left">Add Affiliate Rate</div>
			<div class="step-dark-right">&nbsp;</div>
			<div class="step-no">4</div>
			<div class="step-light-left">Add Affiliate Driver</div>
			<div class="step-light-right">&nbsp;</div>
			<div class="step-no">5</div>
			<div class="step-light-left">Add Terms & Conditions</div>
			<div class="step-light-round">&nbsp;</div>
			<div class="clear"></div>
		</div>
		<!--  end step-holder -->
	
		<!-- start id-form -->
	<form id="vehicleinformationform" enctype="multipart/form-data" method="post" action="">
			<table border="0" cellpadding="0" cellspacing="0"  id="id-form">
				<tr>
				<br><br>
					<th valign="top">One Way Rate:</th>
					<td>
						<input type="text" name="vehicletypeone" id="vehicletypeone" class="inp-form" placeholder="Vehicle Model" style="text-align: center;" />
						&nbsp;
						<input type="hidden" name="onewayvehicletype" id="onewayvehicletype" class="inp-form" placeholder="Vehicle type" style="text-align: center;" />
						<input type="text" name="distanceone" id="distanceone" class="inp-form" placeholder="Distance (From-To)"  style="text-align: center;"/>
						&nbsp;
						<select name="currencyone" id="currencyone" style="position: relative; top: -4px; left: 10px; height: 32px; color: #999;">
							<option value="USD">USD </option>
							<option value="KRW">KRW </option>
							<option value="CNY">CNY </option>
							<option value="THB">THB </option>
							<option value="JPY">JPY </option>
							<option value="MYR">MYR </option>
							<option value="SR">SR </option>
							<option value="EUR">EUR </option>
						</select>
						&nbsp;
						<input type="text" name="rateone" id="rateone" class="inp-form" placeholder="Rate" style="text-align: center;"/>						
					</td>
				</tr>
				
				<tr>
					<th valign="top"> <hr style="position: absolute;" width="850px"> <br> </th>
				</tr>
				
				<tr>
					<th valign="top">Airport Rate:</th>
					<td>
						<input type="text" name="vehicletypeairport" id="vehicletypeairport" class="inp-form" placeholder="Vehicle Model" style="text-align: center;" />
						&nbsp;
						<input type="hidden" name="vehicletype" id="vehicletype" class="inp-form" placeholder="Vehicle type" style="text-align: center;" />
						<input type="text" name="destination" id="destination" class="inp-form" placeholder="Destination" style="text-align: center;" />
						&nbsp;
						<select name="currencyairport" id="currencyairport"  style="position: relative; top: -4px; left: 10px; height: 32px; color: #999;">
							<option value="USD">USD </option>
							<option value="KRW">KRW </option>
							<option value="CNY">CNY </option>
							<option value="THB">THB </option>
							<option value="JPY">JPY </option>
							<option value="MYR">MYR </option>
							<option value="SR">SR </option>
							<option value="EUR">EUR </option>
						</select>
						&nbsp;
						<input type="text" name="rateairport" id="rateairport" class="inp-form" placeholder="Rate"style="text-align: center;" />		
					</td>
				</tr>
				
				<tr>
					<th valign="top"> <hr style="position: absolute;" width="850px"> <br> </th>
				</tr>
				
				<tr>
					<th valign="top">Hourly Rate:</th>
					<td>
						<input type="text" name="vehicletypehourly" id="vehicletypehourly" class="inp-form"  placeholder="Vehicle Model" style="text-align: center;"/> 
						&nbsp;
						<input type="hidden" name="hourlyvehicletype" id="hourlyvehicletype" class="inp-form" placeholder="Vehicle type" style="text-align: center;" />
						<input type="text" name="minimumhourly" id="minimumhourly" class="inp-form" placeholder="Minimum number of hours" style="text-align: center;"/>
						&nbsp;
						<select name="currencyhourly" id="currencyhourly"  style="position: relative; top: -4px; left: 10px; height: 32px; color: #999;">
							<option value="USD">USD </option>
							<option value="KRW">KRW </option>
							<option value="CNY">CNY </option>
							<option value="THB">THB </option>
							<option value="JPY">JPY </option>
							<option value="MYR">MYR </option>
							<option value="SR">SR </option>
							<option value="EUR">EUR </option>
						</select>
						&nbsp;
						<input type="text" name="ratehourly" id="ratehourly"  class="inp-form" placeholder="Rate" style="text-align: center;"/>
					</td>
				</tr>
				
				<tr>
					<th valign="top"> <hr style="position: absolute;" width="850px"> <br> </th>
				</tr>
				
				<tr>
					<th valign="top">Other Services:</th>
					<td>
						<textarea id="services" name="services" rows="8" cols="80" placeholder="Other Services." style=" resize: none;"></textarea>
					</td>
				</tr>
				
				<tr>
					<th valign="top"> <hr style="position: absolute;" width="850px"> <br> </th>
				</tr>
				
				
				<tr>
					<th valign="top">Notes:</th>
					<td>
						<textarea name="remarks" id="remarks" rows="7" cols="80" placeholder="Enter some remarks here." style=" resize: none;"></textarea>
					</td>
				</tr>
				
				
				
				<tr>
					<th valign="top"> <hr style="position: absolute;" width="850px"> </th>
				</tr>
				
				<tr>
					<th valign="top">Attachment:</th>
					<td></td>
				</tr>
				
				
				<tr>
					<th valign="top"> <hr style="position: absolute;" width="850px">  </th>
				</tr>

			<tr>
				<th>&nbsp;</th>
				<td valign="top">
				<br>
					<input type="submit" class="form-submit" />
					<input type="button" id="btnBack" value="" class="form-back"  />
					<input type="button" id="btnSkip" value="" class="form-skip"  />
					<input type="reset" value="" class="form-reset"  />
				</td>
				<td></td>
			</tr>
			
		</table>
		<input type="hidden" id="affiliateid" name="affiliateid"/>
	</form>
	<!-- end id-form  -->

	</td>
	
	<div>
		<form id="imageform" method="post" enctype="multipart/form-data" action='query/ajaxuploadfile.php'>
			<th valign="top"></th>
			<td> <input type="file" name="photoimg" id="photoimg" style="position: absolute; top: 880px; left: 210px;" /></td> 
			<td> <div id="picpreview" style="position: absolute; top: 880px; left: 480px;"> <br><br><br> </div>  </td>
			<td> <input type="hidden" id="affiliateid2" name="affiliateid"/>  </td>
			<td><td><td><td><td><td><td><td><td><td><td><td><td><td></td>
		</form>
	</div>
	
	

<td>

<!--  start related-activities -->
	<div id="related-activities">
		
		<!--  start related-act-top -->
		<div id="related-act-top">
		<img src="images/forms/step_bar.png" width="271" height="43" alt="" />
		</div>
		<!-- end related-act-top -->
		
		<!--  start related-act-bottom -->
		<div id="related-act-bottom">
		
			<!--  start related-act-inner -->
			<div id="related-act-inner">
			
				<div class="left"><a href=""><img src="images/forms/icon_plus.gif" width="21" height="21" alt="" /></a></div>
				<div class="right">
					<h5>Adding affiliate rate:</h5><br>
					<ul class="greyarrow">
						<li>Fill up vehicle information to its designated rates</li>
						<li>For remarks: You may fill it up only once. (e.g additional notes for that affiliate rates)</li>
						<li>Upload files: You can upload files, documents, etc... </li>
						<li>For uploading files, don't click submit button for it will be uploaded automatically. </li>
					</ul>
				</div>
				
				<div class="right" style="color:red;">
					<h5>Note:</h5>
					Remarks or Upload Files can be leave no details at all. <br><br>
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- end related-act-inner -->
			<div class="clear"></div>
		
		</div>
		<!-- end related-act-bottom -->
	
	</div>
	<!-- end related-activities -->
	

</td>
</tr>
<tr>
<td><img src="images/shared/blank.gif" width="695" height="1" alt="blank" /></td>
<td></td>
</tr>
</table>
 
<div class="clear"></div>
 

</div>
<!--  end content-table-inner  -->
</td>
<td id="tbl-border-right"></td>
</tr>
<tr>
	<th class="sized bottomleft"></th>
	<td id="tbl-border-bottom">&nbsp;</td>
	<th class="sized bottomright"></th>
</tr>
</table>



<div class="clear">&nbsp;</div>

</div>
<!--  end content -->
<div class="clear">&nbsp;</div>
</div>
<!--  end content-outer -->


<div class="clear">&nbsp;</div>
